<template>
  <div class="view-wrapper">
    <div class="zhezao" v-if="loadingShow">
      <i class="el-icon-loading" />数据加载中...
    </div>
    <div class="head">
      <el-form :model="filter" ref="queryForm" :inline="true" >
        <el-form-item label="查询" prop="query">
          <el-input v-model="filter.query" placeholder="店铺名称\手机号\卡名称" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="管辖区域" prop="areaId">
          <el-select v-model="filter.areaId" placeholder="请选择">
            <el-option v-for="item in areaSelect" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="神椰店铺行业" prop="shenyeIndustryId">
          <el-select v-model="filter.shenyeIndustryId" placeholder="请选择" >
            <el-option v-for="item in industryList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" icon="el-icon-search"  @click="handleQuery" size="small">搜索</el-button>
          <el-button icon="el-icon-refresh"  @click="resetQuery" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="main_top">
        <div class="lef">
          <div class="" v-for="item in type" :class="['list', currentNavtab == item.id ? 'active' : '']" :key="item.id"
            :value="item.id" @click="handleTab(item.id)">
            {{ item.value }} <span>({{ item.num }})</span>
          </div>
        </div>
        <!-- <el-button type="primary" icon="el-icon-upload">导出</el-button> -->
        <div>
          <el-button type="primary" @click="handleCasting">申请铸造</el-button>
        </div>
      </div>
      <ex-table ref="table" 
        :table-column="tableColumn" :table-data="tableData" @pageSizeChange="handleSizeChange"
        @currentPageChange="handleCurrentChange">
        
        <template v-slot:status="{ scope }">
          <dict-tag :options="statusList" :value="scope.row.status" /> 
        </template>
        <template v-slot:operate="{ scope }">
          <el-button @click="handleAudit(scope.row.id)" size="small" v-if="scope.row.status == 1">审核</el-button>
          <el-button @click="lookDetail(scope.row.id)" size="small" v-if="scope.row.status != 1">查看</el-button>
        </template>
      </ex-table>
    </div>
    <detail-dialog v-if="detailDialog" :id="id" :pathType="pathType" :visible.sync="detailDialog" @success="_handleSuccess" />
    <RefusedDialog />
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  // components
  import DetailDialog from "./components/DetailDialog";
  
  // api
  import {
    getList,
    areaList,
    industrySelect,
    getNumber
  } from "@/api/merchantsNFR/castingApplication";
   import {
    userAreaSelect,
  } from "@/api/common";
  // mixins
  import handlePageMixin from "@/mixins/handlePageMixin";

  export default {
    name: "NewIncreaseVerify",
    components: {
      DetailDialog,
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loadingShow: false,
        areaSelect: [], //区域下拉
        industryList: [],// 神椰行业下拉 
        statusList: [],
        detailDialog: false,
        type: [
          {id: '',value: "全部",num: ""},
          {id: 1,value: "待审核",num: 0},
          {id: 2,value: "已铸造",num: 0},
          {id: 3,value: "拒绝铸造",num: 0},
        ],
        registerLs: [
          {id: "",value: "全部"},
          {id: "1",value: "正常"},
          {id: "2",value: "待使用"},
        ],
        tableColumn: [{
            prop: "govAreaName",
            label: "管辖区域",
            width: "130"
          },
          {
            prop: "shopName",
            label: "店铺名称"
          },
          {
            prop: "phone",
            label: "联系手机号",
            width: "150"
          },
          {
            prop: "shenyeIndustryName",
            label: "神椰店铺行业",
            width: "200"
          },
          {
            prop: "applyTime",
            label: "申请时间",
            width: "150"
          },
          {
            prop: "name",
            label: "卡名称",
            width: "200"
          },
          {
            prop: "price",
            label: "售价",
            width: "150"
          },
          {
            prop: "issueTotal",
            label: "发行数量",
            width: "150"
          },
          {
            slotName: "status",
            slot: true,
            label: "审核状态",
            width: "150"
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            width: "250",
            fixed: "right",
          },
        ],
        
        
        filter: {
          areaId: "", //区域
          query: "", //店铺名称/手机号/卡名称
          shenyeIndustryId:'',//	神椰店铺行业id
          status: "",//	状态 1 审核中 2已铸造 3已拒绝
        },
        tableData: [],
        currentNavtab: 0,
        id: '',
       
      };
    },

    created() {
      this.getDict()
      this.getAreaList();
      this.getIndustrySelect()
      this.getList();
      this.getNum();
    },
    methods: {
      getAreaList() {
        //查询用户区域下拉框
        areaList().then((res) => {
          var arr = [{
            id: "",
            value: "全部",
          }, ];
          this.areaSelect = arr.concat(res.result);
        });
      },
      //神椰行业下拉
      getIndustrySelect(){
        industrySelect().then((res) => {
          this.industryList = res.result
        });
      },
      //获取字典
      getDict() {
        console.log("hahahah");
        var dictType = "merchant_equity_card_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.statusList = res.result[0].dictList
            console.log('this.statusList',this.statusList)
          })
          .finally(() => {
            this.loading = false;
          });
      },
     
     
      
      //切换选项
      handleTab(id) {
        console.log("id", id), (this.currentNavtab = id);
        if (id == 1) {
          this.filter.status = 1;
        } else if (id == 2) {
          this.filter.status = 2;
        } else if (id == 3) {
          this.filter.status = 3;
        } else{
          this.filter.status = "";
        }
        this.getList();
      },
      //列表
      getList() {
        this.loading = true;
        this.loadingShow = true
        const params = {
          ...this.pageOptions,
          ...this.filter,
        };
        getList(params)
          .then((res) => {
            const {
              total,
              records
            } = res.result;
            records.forEach((item) => {
              item.industry = this.$getStatusText("industry_type", item.industry);
              if (item.cityName != "") {
                item.region =
                  item.provinceName + "-" + item.cityName + "-" + item.areaName; //处理地区
              } else {
                item.region = "-";
              }
              //处理注册状态
              if (item.type == 1) {
                item.typeDict = "正常";
              } else if (item.type == 2) {
                item.typeDict = "待使用";
              } else {
                item.typeDict = "-";
              }
              //判断是否为空，为空展示-
              for (var key in item) {
                if (!item[key]) {
                  item[key] = "-";
                }
              }
              if (item.applyStatus == 1) {
                item.isShow = true;
              } else {
                item.isShow = false;
              }
            });
            this.$refs.table.pageOptions.total = total;
            this.tableData = records;
          })
          .finally(() => {
            this.loading = false;
            this.loadingShow = false
          });
      },
      //查询审核条数
      getNum() {
        this.loading = true;
        var params = {
          ...this.pageOptions,
          ...this.filter
        }
        getNumber(params)
          .then((res) => {
            // const { total,waitingAudit, normal, blacklist,refused } = res.result;
            this.type[0].num = res.result.total
            this.type[1].num = res.result.waitingAudit;
            this.type[2].num = res.result.casting;
            this.type[3].num = res.result.refuse;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      //申请铸造
      handleCasting(){
        this.detailDialog = true
        this.pathType = 'add'
      },
      //审核
      handleAudit(id){
        this.id = id
        this.detailDialog = true
        this.pathType = 'edit'
      },
      //查看
      lookDetail(id){
        this.id = id
        this.detailDialog = true
        this.pathType = 'detail'
      },
      _handleSuccess() {
        this.getList();
        this.getNum();
        this.detailDialog = false;
        this.regionDialog = false;
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["queryForm"].resetFields();
        this.currentNavtab = 0
        console.log('this.queryParams', this.queryParams)
        this.filter.status = ''
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.pageOptions.pageNum = 1;
        this.$refs.table.pageOptions.pageNum = 1;
        this.getList();
        this.getNum()
      },
      
    },
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .listBox_head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .el-button{
      height: 35px;
    }
    .btnBox{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-left: 20px;
    }
  }
  .main_top{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    .lef{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 18px;
        border: 1px solid #dfe6ec;
        .list{
            cursor: pointer;
            padding: 0 10px;
            // width: 104px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border-right: 1px solid #dfe6ec;
        }
        .list:nth-last-child(1){
            border: none;
        }
        .active{
            background: #1890ff;
            color: #fff;
        }
    }
  }
  .zhezao{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    color: #1890ff;;
  }
</style>
